﻿@using NGroup.VTL.Models;
@using NGroup.VTL.Core.Const;

@model ProductModel
@{   
    List<ProductModel> sanphamlq = ViewBag.RelatedProducts as List<ProductModel>;
}
@section Head
{
    <style type="text/css">
        #facebox
        {
            top: 326px !important;
        }

        #placeOrder td
        {
            vertical-align: top;
        }

        #placeOrder tr > td:first-child
        {
            padding-top: 5px;
            padding-right: 10px;
            text-align: right;
        }

        #placeOrder textarea
        {
            width: 280px !important;
        }

        #facebox td.body
        {
            width: 400px !important;
        }

        .button
        {
            background: #004a95 url('../images/bg-button-blue.gif') top left repeat-x !important;
            border-color: #004994 !important;
            padding: 5px 15px;
        }

            .button:active
            {
                padding: 4px 15px 5px;
            }

            .button:hover
            {
                text-decoration: underline;
            }

        .input-validation-error
        {
            border: 1px solid red !important;
        }

        #orderResult
        {
            display: none;
            background: #f6dc53;
            font-size: 14px;
        }
        
        .productTitle
        {
            color: #296889;
            margin: 0.67em 0;
            font-size: 15px;
            font-style: normal;
            font-weight: normal;
            text-transform: uppercase;
        }
    </style>
}
@if(Model.ProductID != null)
{
<div class="art-post art-block">
    <div class="art-post-body">
        <div class="art-post-inner">
            <div class="art-postcontent">
                <!-- article-content -->
                <div class="art-blockheader itemListHeader">
                    <h1 class="t">@Html.DisplayFor(x => x.Title)</h1>
                </div>
                <div id="vmMainPage">
                    <table border="0" style="width: 100%;">
                        <tbody>
                            <tr>
                                <td rowspan="5" valign="top" class="image-thumb align-center">
                                    <a href="@Html.DisplayFor(x => x.ImageLargeURL)" title="@Html.DisplayFor(x => x.Title)" rel="lightbox">
                                        <img src="@Html.DisplayFor(x => x.ImageSmallURL)" width="250" alt="@Html.DisplayFor(x => x.Title)"
                                            border="0"/><br />
                                        @Lang.noidung_chitietsanpham_hinhphongto</a>
                                </td>
                                <td rowspan="1" colspan="2" valign="top">
                                    <div class="productTitle">
                                        @Html.DisplayFor(x => x.Title)
                                    </div>
                                    <div class="productTitle">@Lang.noidung_chitietsanpham_gia:&nbsp;@{
                                        int price;
                                        
                                        if(int.TryParse(Model.Price, out price))
                                        {
                                            <span id="productPrice">@price.ToString("#,##0")</span><span>&nbsp;@Lang.noidung_chitietsanpham_orderform_donvithanhtien</span>
                                        }
                                        else
                                        {
                                            <span>@Html.DisplayFor(x => x.Price)</span>
                                        }
                                    }
                                    </div>
                                    <p><a href="@string.Format("{0}#formPlaceOrder", Model.UniqueString)" rel="modal" id="orderLink">@Lang.noidung_chitietsanpham_clickdathang</a></p>
                                    <div id="orderResult">@Lang.noidung_chitietsanpham_dathangbiloi</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <table>
                        <tbody>
                            <tr>
                                <td rowspan="1" colspan="2">
                                    <div class="productCnt">
                                        <div id="producttabs" class="tabsContent cleared">
                                            <ul>
                                                <li><a href="#tabs-1" class="selected">@Lang.noidung_chitietsanpham_tabchitiet</a></li>
                                                <li><a href="#tabs-2">@Lang.noidung_chitietsanpham_tabthongtingiaohang</a></li>
                                            </ul>
                                            <div id="tabs-1">
                                                <div class="mainContent">
                                                    @Html.Raw(Model.Content)
                                                </div>
                                                <div class="clear">
                                                </div>
                                            </div>
                                            <div id="tabs-2">
                                                <div class="mainContent">
                                                    @Html.Raw(Model.ProductDetail)
                                                </div>
                                                <div class="clear">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                @if (sanphamlq != null && sanphamlq.Count > 0)
                                {
                                    <td colspan="3">
                                        <hr>
                                        <h3>@Lang.noidung_chitietsanpham_mautuongtu</h3>
                                        <table width="100%" align="center">
                                            <tbody>
                                                <tr>
                                                    @foreach (var item in sanphamlq)
                                                    {
                                                        <td valign="top">
                                                            <!-- The product name DIV. -->
                                                            <div id="vmproduct" style="background: #FCFCFC; border: 1px solid #CCC; margin-bottom: 10px; width: 180px; height: 190px;">
                                                                <div style="line-height: 14px; margin-bottom: 5px;">
                                                                    <a style="font-size: 12px; color: #B83C25; font-weight: 700; font-family: Arial, Helvetica, sans-serif;
                                                                word-spacing: normal; letter-spacing: normal" title="@item.Title" href="/@item.SupTypeIDString/@item.TypeIDString/@item.UniqueString">
                                                                        @item.Title</a>
                                                                    <br />
                                                                </div>
                                                                <!-- The product image DIV. -->
                                                                <div style="height: 120px;">
                                                                    <a class="hasTip" href="/@item.SupTypeIDString/@item.TypeIDString/@item.UniqueString">
                                                                        <img src="@item.ImageSmallURL" height="145" width="150" alt="@item.Title"
                                                                    border="0"></a>
                                                                </div>
                                                                <!-- The product price DIV. -->
                                                                <div style="text-align: center; color: black;">
                                                                </div>
                                                                <!-- The add to cart DIV. -->
                                                                <div style="text-align: center;">
                                                                </div>
                                                            </div>
                                                        </td>
                                                    }
                                                </tr>
                                            </tbody>
                                        </table>
                                        <br />
                                    </td>
                                }
                            </tr>
                            <tr>
                                <td rowspan="1" colspan="2">
                                    <hr />
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div id="statusBox" class="align-center" style="display: none; visibility: hidden;">
                    </div>
                </div>
                <!-- /article-content -->
            </div>
            <div class="nodisplay">

                <form id="formPlaceOrder" method="post">
                    <table id="placeOrder">
                        <tr>
                            <td>@Lang.noidung_chitietsanpham_orderform_soluong</td>
                            <td>
                                <input type="hidden" value="@Model.ProductID" name="ProductID" />
                                <input type="hidden" value="@Model.SupTypeID" name="ProductSupTypeID" />
                                <input type="hidden" value="@Model.TypeID" name="ProductTypeID" />
                                <input class="text-input medium-input" name="Amount" type="text"
                                    id="txtAmount" /></td>
                        </tr>
                        <tr>
                            <td>@Lang.noidung_chitietsanpham_orderform_hoten</td>
                            <td>
                                <input class="text-input medium-input" name="CustomerName" type="text"
                                    id="txtCustomerName" /></td>
                        </tr>
                        <tr>
                            <td>@Lang.noidung_chitietsanpham_orderform_dienthoai</td>
                            <td>
                                <input class="text-input medium-input" name="CustomerPhone" type="text"
                                    id="txtCustomerPhone" /></td>
                        </tr>
                        <tr>
                            <td>@Lang.noidung_chitietsanpham_orderform_diachigiaohang</td>
                            <td>
                                <textarea cols="15" rows="2" name="ShippingAddress" id="txtShippingAddress"></textarea></td>
                        </tr>
                        <tr>
                            <td style="padding-top: 15px; padding-bottom: 15px;">@Lang.noidung_chitietsanpham_orderform_thanhtien</td>
                            <td style="padding-top: 15px; padding-bottom: 15px;"><span style="font-weight: bold;" id="txtTotalPrice">-</span></td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                @*<button id="btnPlaceOrder" class="button" value="Đặt hàng" style="float: right;">Đặt hàng</button>*@
                                <input type="button" id="btnPlaceOrder" class="button" value="@Lang.noidung_chitietsanpham_orderform_nutdathang" style="float: right;" /></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="cleared">
            </div>
        </div>
        <div class="cleared">
        </div>
    </div>
</div>
}
else
{
    <h3>@Lang.noidung_chitietsanpham_sanphamkhongtontai</h3>
}

<script src="@Url.Content("~/Content/script/slimbox2f.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/Content/adminpages/scripts/simpla.jquery.configuration.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/adminpages/scripts/facebox.js")"></script>
<script type="text/javascript">
    $(function () {

        var lastInvalidInput = "";
        var productPrice = $("#productPrice").text().replace(',','');

        $(document).on("change", "#txtAmount", function () {
            var newAmount = $(this).val();
            if (!productPrice == false && isNaN(productPrice) == false && !newAmount == false && isNaN(newAmount) == false) {
                var newTotal = AddCommas(newAmount * productPrice);
                $("#facebox #txtTotalPrice").text(newTotal + " VNĐ");
            }
            else {
                $("#facebox #txtTotalPrice").text("-");
            }
        });

        $(document).on("click", "#btnPlaceOrder", function () {
            var invalidInput = ValidateOrderForm();

            if (!invalidInput == false) {
                $("#formPlaceOrder input").removeClass('input-validation-error');
                $(invalidInput).addClass('input-validation-error');
                lastInvalidInput = invalidInput;
            }
            else {
                $(lastInvalidInput).removeClass('input-validation-error');
                lastInvalidInput = "";

                var formData = $("#formPlaceOrder").serialize();

                $.ajax({
                    url: '/mua-hang/dat-mua' + '?' + formData,
                    type: 'POST',
                    contentType: 'json',
                    success: function (data) {

                        $.facebox.close();

                        $("#orderResult").html("@Lang.noidung_chitietsanpham_orderform_datmuathanhcong");
                    },
                    error: function (e) {
                        $("#orderResult").html("@Lang.noidung_chitietsanpham_orderform_loidatmua");
                    }
                }).done(function () {
                    $("#orderResult").show().fadeOut(120000);
                });
            }
        });
    });

    function ValidateOrderForm() {

        var invalidIds = new Array();

        var amount = $("#facebox #txtAmount").val();
        $("#txtAmount").val(amount);

        if (!amount == true || isNaN(amount)) {
            invalidIds.push("#facebox #txtAmount");
        }

        var customerName = $("#facebox #txtCustomerName").val();
        $("#txtCustomerName").val(customerName);

        if (!customerName == true) {
            invalidIds.push("#facebox #txtCustomerName");
        }

        var customerPhone = $("#facebox #txtCustomerPhone").val();
        $("#txtCustomerPhone").val(customerPhone);

        if (!customerPhone == true) {
            invalidIds.push("#facebox #txtCustomerPhone");
        }

        var shippingAddress = $("#facebox #txtShippingAddress").val();
        $("#txtShippingAddress").val(shippingAddress);

        if (!shippingAddress == true) {
            invalidIds.push("#facebox #txtShippingAddress");
        }

        return invalidIds.join(',');
    }

    function AddCommas(str) {
        var parts = (str + "").split("."),
            main = parts[0],
            len = main.length,
            output = "",
            i = len - 1;

        while (i >= 0) {
            output = main.charAt(i) + output;
            if ((len - i) % 3 === 0 && i > 0) {
                output = "," + output;
            }
            --i;
        }
        // put decimal part back
        if (parts.length > 1) {
            output += "." + parts[1];
        }
        return output;
    }
</script>
